<template>
	<div class="incoming-inspection-detail" v-loading="loading">
		<div class="page-header">
			<div class="header-content">
				<el-button @click="goBack" icon="ArrowLeft" type="primary" plain>返回列表</el-button>
				<h2>到货检验详情</h2>
			</div>
		</div>
		<el-descriptions :column="2" border v-if="detail">
			<el-descriptions-item label="检验单号">{{ detail.inspectionOrderNumber }}</el-descriptions-item>
			<el-descriptions-item label="检验主题">{{ detail.inspectionSubject }}</el-descriptions-item>
			<el-descriptions-item label="检验日期">{{ formatDate(detail.inspectionDate) }}</el-descriptions-item>
			<el-descriptions-item label="检验人">{{ detail.inspectorName || detail.inspectorId }}</el-descriptions-item>
			<el-descriptions-item label="供应商">{{ detail.supplierName || detail.supplierId }}</el-descriptions-item>
			<el-descriptions-item label="状态"><el-tag :type="statusType(detail.inspectionStatus)">{{ detail.inspectionStatus }}</el-tag></el-descriptions-item>
			<el-descriptions-item label="备注" :span="2">{{ detail.remarks || '-' }}</el-descriptions-item>
		</el-descriptions>
		<el-divider>检验明细</el-divider>
		<el-table :data="detail?.details || []" border stripe>
			<el-table-column type="index" label="#" width="60" />
			<el-table-column prop="itemNumber" label="物品编号" width="160" />
			<el-table-column prop="itemName" label="物品名称" width="180" />
			<el-table-column prop="inspectionType" label="检验类型" width="100" />
			<el-table-column prop="receivedQuantity" label="收货数量" width="110" />
			<el-table-column prop="inspectionQuantity" label="检验数量" width="110" />
			<el-table-column prop="qualifiedQuantity" label="合格数量" width="110" />
			<el-table-column prop="unqualifiedQuantity" label="不合格数量" width="120" />
			<el-table-column prop="inspectionResult" label="结果" width="100" />
			<el-table-column prop="inspectionRemarks" label="备注" min-width="160" />
		</el-table>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { incomingInspectionApi, type GoodsArrivalInspectionDetailDto } from '@/api/incomingInspectionApi'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const detail = ref<GoodsArrivalInspectionDetailDto | null>(null)

onMounted(() => load())

const load = async () => {
	try {
		loading.value = true
		const id = Number(route.params.id)
		const res = await incomingInspectionApi.getById(id)
		if (res.code === 200) {
			detail.value = res.data
		} else {
			ElMessage.error(res.message || '获取详情失败')
		}
	} catch (e:any) {
		ElMessage.error(e.message || '获取详情失败')
	} finally {
		loading.value = false
	}
}

const formatDate = (d?: string) => d ? new Date(d).toLocaleDateString('zh-CN') : '-'
const statusType = (s?: string) => s === '已完成' ? 'success' : s === '检验中' ? 'warning' : s === '已驳回' ? 'danger' : 'info'

const goBack = () => {
	router.push('/IncomingInspectionList')
}
</script>

<style scoped>
.incoming-inspection-detail { padding: 20px; }
.page-header { margin-bottom: 16px; }
.header-content {
	display: flex;
	align-items: center;
	gap: 16px;
}
.header-content h2 {
	margin: 0;
}
</style> 